<template>
  <el-container>
    <el-header height="calc(9vh - 2px)">Qt+qml+vue示例</el-header>
    <el-main>
      <!-- <div class="main"> -->
        <slot></slot>
      <!-- </div> -->
    </el-main>
    <el-footer height="calc(9vh - 2px)">Qt+qml+vue示例</el-footer>
  </el-container>
</template>

<script>
// import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'Container',
  props: {
   
  },
  computed: {
   
  },
  methods: {
    
  }
}
</script>

<style scoped>
  .el-header, .el-footer {
       /* background-color: #B3C0D1; */
        color: #c5c9d0;
        text-align: center;

       /* line-height: 60px; */
       /* height: 100px; */
        font-size: 45px;
        /* color: #fff; */
        font-weight: 600;
        /* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
        font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
     }

  .el-header {
    /* padding: 0 5px; */
    text-align:left;
    line-height:9vh;
    /* padding-top: 1.5vh; */
    border-bottom: 2px solid #c5c9d0;
  }

  /* .el-header::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 3px;
      background: #fff;
    } */

  .el-footer {
    /* padding-right: 5px; */
    text-align:right;
    line-height:9vh;
    /* padding-top: 0px; */
    border-top: 2px solid #c5c9d0;
  }

   .el-main {
     /* background-color: #E9EEF3; */
     /* color: #ff5500; */
     /* text-align: center; */
     /* line-height: 1060px; */
     min-height: calc(100vh - 2*9vh);
     max-height: calc(100vh - 2*9vh);
	 /* padding: 15px; */
	 /* overflow: auto; */
   }

  /* body > .el-container {
     margin-bottom: 40px;
   } */

   .main {
     /* height: ; */
   }

</style>
